<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文章列表</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="common_title">
        文章类别管理
      </div>
      <div class="container-fluid common_con">
        <table
          class="table table-striped table-bordered table-hover mp20 category_table"
        >
          <thead>
            <tr>
              <th>名称</th>
              <th>Slug</th>
              <th class="text-center" width="100">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>未分类</td>
              <td>uncategorized</td>
              <td class="text-center">
                <a
                  href='javascript:editTr({"id":"1","slug":"uncategorized","name":"未分类"});'
                  class="btn btn-info btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:deleteTr( 1 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>

            <tr>
              <td>奇趣事</td>
              <td>funny</td>
              <td class="text-center">
                <a
                  href='javascript:editTr({"id":"2","slug":"funny","name":"奇趣事"});'
                  class="btn btn-info btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:deleteTr( 2 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>

            <tr>
              <td>会生活</td>
              <td>living</td>
              <td class="text-center">
                <a
                  href='javascript:editTr({"id":"3","slug":"living","name":"会生活"});'
                  class="btn btn-info btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:deleteTr( 3 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>

            <tr>
              <td>爱旅行</td>
              <td>travel</td>
              <td class="text-center">
                <a
                  href='javascript:editTr({"id":"4","slug":"travel","name":"爱旅行"});'
                  class="btn btn-info btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:deleteTr( 4 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3" class="text-center">
                <a
                  href="#"
                  class="btn btn-success btn-add"
                  data-toggle="modal"
                  data-target="#addModal"
                  >新增分类</a
                >
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="addModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            ></button>
            <h4 class="modal-title">新增分类</h4>
          </div>
          <div class="modal-body">
            <form>
              <!-- 隐藏域  -->
              <input type="hidden" name="id" />
              <div class="form-group">
                <label for="recipient-name" class="control-label"
                  >分类名称:</label
                >
                <input type="text" class="form-control cate_name" name="name" />
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label"
                  >分类别名:</label
                >
                <input type="text" class="form-control cate_slug" name="slug" />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" id="model_shutoff">
              关闭
            </button>
            <button type="button" class="btn btn-primary" id="model_add">
              新增
            </button>
          </div>
        </div>
      </div>
    </div>

    <script>
      $('#addModal').modal({
        show: false,
        backdrop: false
      })

      $('#model_shutoff').click(function() {
        alert('shutoff')
        $('#addModal').modal('hide')
      })

      $('.category_table').delegate('a', 'click', function() {
        if ($(this).hasClass('btn-info')) {
          $('#addModal .modal-title').html('修改分类名称')
          $('#addModal').modal('show')
        }
      })
    </script>
    <!-- 导入模板引擎 -->
    <script src="./js/template-web.js"></script>
    <!-- 定义模板 -->
    <script id="cate" type="text/html">
      {{each data}}
          <tr>
              <td>{{$value.name}}</td>
              <td>{{$value.slug}}</td>
              <td class="text-center">
                  <a href='javascript:editTr({"id":"{{$value.id}}","slug":"{{$value.slug}}","name":"{{$value.name}}"});' class="btn btn-info btn-xs">编辑</a>
                  <a href="javascript:deleteTr( {{$value.id}} );" class="btn btn-danger btn-xs">删除</a>
              </td>
          </tr>
      {{/each}}
    </script>
    <!-- 自己的逻辑 -->
    <script>
      /*
          获取文章分类信息
            请求地址：http://localhost:8000/admin/category_search
            请求方式：get
            请求参数：无
            步骤
            1. 进入页面之后
            2. 通过ajax获取数据
            3. 数据获取到之后渲染到页面上
                1. 结合模板引擎来渲染
                文章新增

        新增分类
            请求地址：http://localhost:8000/admin/category_add
            请求方式：post
            请求参数：
            步骤
            1. 点击新增按钮 弹出新增框
            2. 新增框中输入 name和slug
            1. 点击取消 关闭
            2. 点击新增  
                1. 获取数据
                2. 调用接口
                3. 响应回来之后

          分类删除
            请求地址：http://localhost:8000/admin/category_delete
            请求方式：post
            请求参数：id
            步骤
            1. 生成每一行的时候，把id到deleteTr()
            2. 实现deleteTr方法 获取id
            3. 通过ajax删除对应的数据
            4. 删除成功之后 重新获取数据（局部刷新）

          */

      $(function() {
        function getCate() {
          $.ajax({
            url: 'http://localhost:8000/admin/category_search',
            type: 'get',
            success: function(backData) {
              console.log(backData)
              // 调用方法 渲染页面
              var html = template('cate', backData)
              $('tbody').html(html)
            }
          })
        }
        // 删除数据的方法
        window.deleteTr = function(id) {
          // console.log(id)
          // 调用接口
          $.ajax({
            url: 'http://localhost:8000/admin/category_delete',
            type: 'post',
            data: {
              id: id
            },
            success: function(backData) {
              // console.log(backData);
              if (backData.code == 200) {
                // 重新获取数据即可
                getCate()
              }
            }
          })
        }

        // 弹出编辑框的逻辑
        window.editTr = function(data) {
          console.log(data)
          // forin
          for (const key in data) {
            $('input[name=' + key + ']').val(data[key])
            /*
              $('input[name=id]).val(data.id)
              $('input[name=slug]).val(data.slug)
              $('input[name=name]).val(data.name)
            */
          }
          // 改弹框内容
          $('.modal-title').text('敬请修改把！！！')
          $('#model_add')
            .text('保存')
            .addClass('btn-success')
        }

        // 点击新增还原外观
        $('.btn-add').click(function() {
          // 改弹框内容
          $('.modal-title').text('肆意新增吧！')
          $('#model_add')
            .text('新增 ')
            .removeClass('btn-success')
          // 清空内容
          $('form input').val('')
        })

        // 默认调用一次
        getCate()

        // 点击新增按钮
        $('#model_add').click(function() {
          //  如果是保存
          if ($(this).hasClass('btn-success')) {
            // 获取数据
            // var id = $('input[name=id]').val()
            // var slug = $('input[name=slug]').val()
            // var name = $('input[name=name]').val()
            // ajax
            $.ajax({
              url: 'http://localhost:8000/admin/category_edit',
              type: 'post',
              // data: {
              //   id: id,
              //   slug: slug,
              //   name: name
              // },
              data:$('form').serialize(),
              success: function(backData) {
                console.log(backData)
                // 重新获取数据即可
                if (backData.code == 200) {
                  getCate()
                }
              }
            })
            // 局部刷新
          } else {
            // 新增
            $.ajax({
              url: 'http://localhost:8000/admin/category_add',
              type: 'post',
              data: {
                name: $('.cate_name').val(),
                slug: $('.cate_slug').val()
              },
              success: function(backData) {
                //   console.log(backData)
                // 隐藏弹出框
                $('#addModal').modal('hide')
                if (backData.code == 200) {
                  //  重新获取数据
                  getCate()
                }
              }
            })
          }
          // 关闭弹框
          $('#addModal').modal('hide')
        })
      })
    </script>
  </body>
</html>
